<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8"/>
  <title>{$moduleTitle}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--[if lt IE 10]>
  <style type="text/css">.isIE{display:block !important;}</style>
  <![endif] -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
  <style>
    body { font-family:"Microsoft YaHei" !important; padding-top:50px; }
    ul,ol { list-style:none; }
    ul,li,dl { margin:0;  padding:0; }
    .navbar-brand { padding-top:10px;  padding-bottom:0; padding-left:0; }
    .wmfl-main {  position:absolute; left:200px; right:15px; top:70px; bottom:40px; }
    #main { position:absolute; width:100%; height:100%; border:none; }
    .wmfl-navbar { width:200px; height:100%; background:#eee; border-radius:5px; position:fixed; }
    .wmfl-navbar li a { display:block; line-height:40px; padding-left:20px; }
    .wmfl-navbar li a:hover,.wmfl-navbar li.active a{ background:#cecece; text-decoration:none; }
    footer.wmfl-copr { position:fixed; bottom:0; left:50%; -webkit-transform:translateX(-50%); transform:translateX(-50%); background-color: #eee; width: 100%; height: 32px; line-height: 32px; }
    .container {  width:100%; }
    .isIE { position:fixed; z-index:9998; left:35%; top:50px; display:none; }
    .wmfl-nav { border-top:3px solid #B84D88; }
    .wmfl-container { position:fixed; height:100%; }
    .priview-btn { position:fixed; right:0; top:45%; }
    .wmfl-phone-priview { position:absolute; right:100px; top:70px; width:320px; height:600px; display:none; }
  </style>
</head>

<body>

  <!-- 顶部导航  -->
  <nav class="nav-bar navbar-inverse navbar-fixed-top wmfl-nav" role="navigation">
    <div class="container">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#wmfl-nav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="__MODULE__/index" class="navbar-brand"><img alt="微美风铃" id="wmfl-logo" style="max-height:40px;" src="" data-src="__PUBLIC__/Style/Admin/Default/images/wmlogo.png"></a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav" id="top-menu">
          <volist name="topMenu" id="vo">
            <li><a href="#" id="{$vo.id}">{$vo.name}</a></li>
          </volist>
          </ul>
        <!-- 管理员 -->
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{$Think.session.name} <b class="caret"></b></a>
              <ul class="dropdown-menu">
                  <li><a href="__MODULE__/admin/modify/id/{$Think.session.id}" target="main">信息修改</a></li>
                  <li class="divider"></li>
                  <li><a href="__MODULE__/login/logout">退出</a></li>
                </ul>
            </li>
          </ul>
        </div>
      </div>
  </nav>
  
  <!-- 中央内容 -->
  <section class="container">
    <!-- 左侧导航 -->
    ﻿<nav class="wmfl-navbar" id="wmfl-navbar">
      <ul> 
        <volist name="shortcutMenu" id="vo">
          <li><a href="__MODULE__/{$vo.url}" target="main"/>{$vo.name}</a></li>
        </volist>
      </ul>
    </nav>
    <!--  -->
    <section class="wmfl-main clearfix">
      <iframe src="__CONTROLLER__/home" id="main" name="main" frameborder="0"></iframe>
    </section>
    <!--  -->
  </section>
  
  <footer class="wmfl-copr clearfix">
    <p class="text-center text-muted">©2014 观元科技 All Rights Reserved</p>
  </footer>
  
  <!-- IE10以下浏览器的提示 -->
  <div class="alert alert-danger alert-dismissable isIE">
    您的浏览器版本过低，风铃建议您换用<a href="#">高级浏览器</a>获得更好的体验效果<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>
  </div>
  
  <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    (function( window ){
      
      "use strict";
      
      var storageImage = function(obj, itemName, holdTime, isBackground ){
        this.obj = obj;
        this.itemName = itemName;
        this.holdTime = holdTime;
        this.isBackground = isBackground || false;
        this.image = new Image();
        this.init();
      };
      
      storageImage.prototype = {
  
        storage: function( todaysDate ) {
  
          var canvas = document.createElement( "canvas" ),
            contxt = canvas.getContext( "2d" );
          
          //设置canvas和图片的宽高一样
          canvas.width = this.image.width;
          canvas.height = this.image.height;
          
          contxt.drawImage( this.image, 0, 0, this.image.width, this.image.height );
          
          var storaged = {};
          storaged.url = canvas.toDataURL("image/png"),
          storaged.date = todaysDate;
          
          //保存到本地中，因为存储有5M的大小限制，所以这里使用try catch 会更好
          try {
            localStorage.setItem( this.itemName, JSON.stringify( storaged ) );
          } catch(e) {
            console.log(e);
          }
          
          this.isBackgound ? ( this.obj.style.background = this.image.src ) : this.obj.setAttribute( "src", this.image.src );
          
        },
        
        storagePrepare: function() {
          
          var date = new Date(),
          todaysDate = ( date.getMonth()+1 ).toString() + date.getDate().toString();
        
          if( localStorage.getItem( this.itemName ) ) {
            
            var item = JSON.parse( localStorage.getItem( this.itemName ) );
            
            if( (item.date+this.holdTime) < todaysDate ) {
              
              this.storage( todaysDate );
              
            } else {
              
              this.isBackgound ? ( this.obj.style.background = item.url ) : this.obj.setAttribute( "src", item.url );
              
            }
            
            
          } else {
            
            this.storage( todaysDate );
            
          }
        },
        
        init: function() {
          var _this = this;
          this.image.src = this.obj.getAttribute( "data-src" );
          this.image.addEventListener("load", function() {
            _this.storagePrepare();
          }, false);
        }
      };
      
      if( typeof define === "function" && define.amd ) {
        define( storageImage );
      } else {
        window.storageImage = storageImage;
      }
      
    })( window )
  </script>
  <script type="text/javascript">
    //根据iframe设置外层高度
    $(function(){
      $("#main").load(function(){
        $(".wmfl-main").height($(this).contents().height());
      });
    });

    //防止iframe嵌套
    $(function(){
      if(window != top){top.location.href = location.href;}  
    });
    
    //ajax 获取菜单
    $(function(){
      $("#top-menu a").click(function(){
        
        var ul = $("#wmfl-navbar ul");
        $("#wmfl-navbar ul").html("");
        
        var oLoading = $("<li><span class='get-menu-loading center-block'><img src='__PUBLIC__/Style/Admin/Default/images/loading.gif'/>加载中</span></li>").appendTo(ul);
        
        $.post("__CONTROLLER__/getSubMenu", {pid: this.id}, function(data){
          if(data.error == 0){
            var list = "";
            for(var i=0; i<data.extra.length; i++){
              list += "<li><a href='__MODULE__/"+data.extra[i].url+"' target='main'>"+data.extra[i].name+"</a></li>";
            };
            ul.html(list);
          }else{
            ul.html("");
          }
        });
        return false;
      });
    });
    
    //菜单添加活动状态
    $(function(){
      $("#wmfl-navbar ul").delegate("li", "click", function(){
        $(this).siblings("li").removeClass("active");
        $(this).addClass("active");
      });
    });
    
    //存储图片
    var wmflLogo = document.getElementById("wmfl-logo");
    new storageImage(wmflLogo, "wmflLogo");
  </script>
</body>
</html>